<!--html代码-->
<template>
  <div>
    <div style=" max-width: 1000px;border: #DFDFDF solid 1px ;margin:auto; padding: 8px 20px;">基础信息</div>
    <el-form :model="customer"
      style="background-color: #FFFFFF; max-width: 1000px;border: #DFDFDF solid 1px ;margin:auto; padding: 20px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="市场:">
            <el-select v-model="customer.market" placeholder="请选择" clearable>
              <el-option label="内销" value="1" />
              <el-option label="外销" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="国家:">
            <el-select v-model="customer.country" placeholder="请选择" clearable>
              <el-option label="中国" value="中国" />
              <el-option label="美国" value="美国" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="客户公司名称:">
            <el-input v-model="customer.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机型:">
            <el-input v-model="customer.model" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="成交或询价产品:">
            <el-checkbox-group v-model="product">
              <el-checkbox label="配件" value="配件" />
              <el-checkbox label="固定设备" value="固定设备" />
              <el-checkbox label="移动设备" value="移动设备" />
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="感兴趣产品:">
            <el-input v-model="customer.interestProduct" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="客户联系人:">
            <el-input v-model="customer.customerName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户联系手机:">
            <el-input v-model="customer.customerPhone" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="客户邮箱:">
            <el-input v-model="customer.customerEmail" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板联系人:">
            <el-input v-model="customer.boss" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="老板联系手机:">
            <el-input v-model="customer.bossPhone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板邮箱:">
            <el-input v-model="customer.bossEmail" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系地址:">
            <el-input v-model="customer.customerAddress" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户目的港口:">
            <el-input v-model="customer.mailingAddress" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="客户分类:">
            <el-select v-model="customer.c_id" placeholder="请选择" clearable>
              <el-option v-for="item in categoryOptions" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户类型:">
            <el-select v-model="customer.c_type" placeholder="请选择" clearable>
              <el-option label="合作客户" value="0" />
              <el-option label="潜在客户" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="公司简介:">
            <el-input v-model="customer.companyProfile" style="max-width: auto" :rows="2" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="客户目的地:">
            <el-input v-model="customer.destination" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目的地和快递地址是否一致:">
            <el-radio-group v-model="customer.isFit">
              <el-radio value="1" size="large">一致</el-radio>
              <el-radio value="0" size="large">不一致</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="快递地址:">
            <el-input v-model="customer.dourierAddress" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style=" max-width: 1000px;border: #DFDFDF solid 1px ;margin:auto; padding: 8px 20px;">账号信息</div>
    <el-form :model="customer" ref="validFromUserName"
      style="background-color: #FFFFFF; max-width: 1000px;border: #DFDFDF solid 1px ;margin:auto; padding: 20px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="归属销售:" prop="saleId" :rules="rulesUserName">
            <el-select v-model="customer.saleId" placeholder="请选择" clearable>
              <el-option v-for="item in saleIdOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="账号:" prop="username">
            <el-input v-model="customer.username" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="密码:" prop="password">
            <el-input v-model="customer.password" type="password" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="密码验证手机号:" prop="validMobile">
            <el-input v-model="customer.validMobile" />
          </el-form-item>
        </el-col>
      </el-row>
      <div style="text-align: center;">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="info" @click="cls">取消</el-button>
      </div>
    </el-form>

  </div>
</template>

<!--js代码-->
<script setup>
import { ref, onBeforeMount } from 'vue'
import { ElMessage } from "element-plus";
//路由跳转
import { useRoute, useRouter } from 'vue-router'
//引入api
import { saveCustomer } from '@/api/customer'
import { queryCategory } from '@/api/category'
import { queryCustomerById } from '@/api/customer.js'


//声明路由跳转实例
const router = useRouter()
const route = useRoute()

const product = ref([])
const categoryOptions = ref([])
//声明事件
const emit = defineEmits(['close'])
//表单对象   客户数据
const customer = ref({
  id: 0,
  name: '',
  boss: '',
  bossEmail: '',
  bossPhone: '',
  c_id: '',
  c_type: '',
  companyProfile: '',
  country: '',
  customerAddress: '',
  customerEmail: '',
  customerName: '',
  customerPhone: '',
  destination: '',
  dourierAddress: '',
  interestProduct: '',
  isFit: '',
  mailingAddress: '',
  market: 1,
  model: '',
  username: '',
  password: '',
  product: '',
  saleId: '',
  source: '',
  validMobile: ''
})

const id = ref(0);

const validFromUserName = ref()

// 基础信息表单验证规则
// const rulesBase = {
//   market: [
//     { required: true, message: '请选择市场', trigger: 'change' }
//   ],
//   country: [
//     { required: true, message: '请选择国家', trigger: 'change' }
//   ],
//   name: [
//     { required: true, message: '请输入客户公司名称', trigger: 'blur' },
//     { max: 255, message: '客户公司名称长度不能超过 255 个字符', trigger: 'blur' }
//   ],
//   model: [
//     { required: true, message: '请输入机型', trigger: 'blur' },
//     { max: 100, message: '机型长度不能超过 100 个字符', trigger: 'blur' }
//   ],
//   product: [
//     { type: 'array', required: true, message: '请选择成交或询价产品', trigger: 'change' }
//   ],
//   interestProduct: [
//     { required: true, message: '请输入感兴趣产品', trigger: 'blur' },
//     { max: 255, message: '感兴趣产品长度不能超过 255 个字符', trigger: 'blur' }
//   ],
//   customerName: [
//     { required: true, message: '请输入客户联系人', trigger: 'blur' },
//     { max: 50, message: '客户联系人长度不能超过 50 个字符', trigger: 'blur' }
//   ],
//   customerPhone: [
//     { required: true, message: '请输入客户联系手机', trigger: 'blur' },
//     { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
//   ],
//   customerEmail: [
//     { required: true, message: '请输入客户邮箱', trigger: 'blur' },
//     { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
//   ],
//   boss: [
//     { required: true, message: '请输入老板联系人', trigger: 'blur' },
//     { max: 50, message: '老板联系人长度不能超过 50 个字符', trigger: 'blur' }
//   ],
//   bossPhone: [
//     { required: true, message: '请输入老板联系手机', trigger: 'blur' },
//     { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
//   ],
//   bossEmail: [
//     { required: true, message: '请输入老板邮箱', trigger: 'blur' },
//     { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
//   ],
//   customerAddress: [
//     { required: true, message: '请输入联系地址', trigger: 'blur' },
//     { max: 255, message: '联系地址长度不能超过 255 个字符', trigger: 'blur' }
//   ],
//   mailingAddress: [
//     { required: true, message: '请输入客户目的港口', trigger: 'blur' },
//     { max: 255, message: '客户目的港口长度不能超过 255 个字符', trigger: 'blur' }
//   ],
//   c_id: [
//     { required: true, message: '请选择客户分类', trigger: 'change' }
//   ],
//   c_type: [
//     { required: true, message: '请选择客户类型', trigger: 'change' }
//   ],
//   companyProfile: [
//     { max: 1000, message: '公司简介长度不能超过 1000 个字符', trigger: 'blur' }
//   ],
//   destination: [
//     { required: true, message: '请输入客户目的地', trigger: 'blur' },
//     { max: 255, message: '客户目的地长度不能超过 255 个字符', trigger: 'blur' }
//   ],
//   isFit: [
//     { required: true, message: '请选择目的地和快递地址是否一致', trigger: 'change' }
//   ],
//   dourierAddress: [
//     { required: true, message: '请输入快递地址', trigger: 'blur' },
//     { max: 255, message: '快递地址长度不能超过 255 个字符', trigger: 'blur' }
//   ]

// }

// 账号信息表单验证规则
const rulesUserName = {
  saleId: [
    { required: true, message: '请选择归属销售', trigger: 'change' }
  ],
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  validMobile: [
    { required: true, message: '请输入密码验证手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ]
}
async function initData() {
  let res = await queryCustomerById(id.value);
  if (res.code == 200) {
    console.log(res.data);
    customer.value = res.data;
    delete customer.value.username;
    delete customer.value.password;
    delete customer.value.validMobile;
  }
}

//查询客户分类
async function queryCustomerCategory() {
  let res = await queryCategory();

  if (res.code == 200) {
    categoryOptions.value = res.data;
  }
}

function cls() {
  router.push("/customer/list")
  emit('close')
  // console.log(queryCustomerById(productId));
}

async function save() {
  // let validBase = await validFromBase.value?.validate((valid) => {
  //   if (!valid) {
  //     ElMessage({
  //       message: '基础信息表单验证失败，请检查输入',
  //       type: 'error'
  //     });
  //   }
  // });
  let validUserName = await validFromUserName.value?.validate((valid) => {
    if (!valid) {
      ElMessage({
        message: '账号信息表单验证失败，请检查输入',
        type: 'error'
      });
    }
  });
  // let valid = validBase && validUserName;

  if (!validUserName) return;

  customer.value.product = product.value.join(" ");

  let res = await saveCustomer(customer.value);
  if (res.code === 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    cls();
  } else {
    ElMessage({
      message: "保存失败，请稍后重试",
      type: "error"
    });
  }
}


//生命周期
onBeforeMount(() => {
  id.value = route.query.id;
  queryCustomerCategory();
  initData();
});


</script>

<!--css代码-->
<style scoped></style>